<template>
  <div id="box">
    <el-card class="!border-none" shadow="never">
      <el-row>
        <el-col :span="10">
          <el-button type="primary" @click="check(2)">审核通过</el-button>
          <el-button type="primary" @click="check(3)" style="margin-left: 20px;">审核驳回</el-button>
          <el-badge :value="bsnum<=0?'':bsnum" class="item">
            <el-button type="primary" style="margin-left: 15px;">
              <router-link :to="{path: getRoutePath('report.check/sexamine')}">
                数据补审
              </router-link>
            </el-button>
          </el-badge>
          <el-button type="primary" @click="exportExcel" style="margin-left: 15px;">报表导出</el-button>
        </el-col>
        <el-col :span="2">
          <span style="font-size: 18px;font-weight: bold;line-height: 32px;">当班调度：</span>
        </el-col>
        <el-col :span="12">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="白班：">
              <el-input v-model="formInline.dbbai1" class="w-[100px]" style="margin-right: 10px;" />
              <el-input v-model="formInline.dbbai2" class="w-[100px]" />
            </el-form-item>
            <el-form-item label="夜班：">
              <el-input v-model="formInline.dbye1" class="w-[100px]" style="margin-right: 10px;" />
              <el-input v-model="formInline.dbye2" class="w-[100px]" />
            </el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
          </el-form>
        </el-col>
      </el-row>

    </el-card>
    <el-card id="scroll-box" class="!border-none mt-4" shadow="never">
      <div ref="innerRef">
        <div class="bltitle">
          {{newdate}}生产日报表
        </div>
        <div v-for="item in comArr" :key="item.key" :id="item.key" style="margin-bottom: 30px;">
          <component :is="item.value" :date="newdate" :isup="true"></component>
        </div>
      </div>
    </el-card>

    <!-- 快速定位 -->
    <div class="location" @mouseover="yiru">
      <el-button type="primary">快速定位</el-button>
    </div>
    <div v-show="ishow" class="list" @mouseleave="yichu">
      <div v-for="item in comArr" class="item">
        <el-button style="width: 150px;white-space:normal;height: 40px;" :type="defalutKey==item.key?'primary':''"
          @click="to(item.key)">{{item.name}}</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="reportCheck">
  import {
    getRoutePath
  } from '@/router'
  import ylmglqk from '@/components/report/ylmglqk.vue';
  import pmzbjjtzlqk from '@/components/report/pmzbjjtzlqk.vue';
  import cpxsjhglyljcqk from '@/components/report/cpxsjhglyljcqk.vue';
  import jlscjgykzqk from '@/components/report/jlscjgykzqk.vue';
  import gxlscjgykzqk from '@/components/report/gxlscjgykzqk.vue';
  import jhscjgykzqk from '@/components/report/jhscjgykzqk.vue';
  import dlscqk from '@/components/report/dlscqk.vue';
  import jcscqk from '@/components/report/jcscqk.vue';
  import jbscqk from '@/components/report/jbscqk.vue';
  import yqjzhtqk from '@/components/report/yqjzhtqk.vue';
  import hbzb from '@/components/report/hbzb.vue';
  import rscfx from '@/components/report/rscfx.vue';
  import rgcfx from '@/components/report/rgcfx.vue';

  import cache from "@/utils/cache";
  import { checkSave, getDispatch, dispatchSave, getNocheck, exportExcelApi } from "@/api/check";

  import { GetDateStr, timeFormat } from '@/utils/util'
  const date = ref(GetDateStr(-1))
  
  const newdate = computed(() => {
    let d = new Date().getHours();
    if(d<17){
      return date.value
    }else{
      return timeFormat()
    }
  })
  

  const formInline = ref({
    dbbai1: '',
    dbbai2: '',
    dbye1: '',
    dbye2: '',
  })

  const comArr = ref([{
    key: 'ylmglqk',
    value: markRaw(ylmglqk),
    name: '原料煤管理情况',
  }, {
    key: 'pmzbjjtzlqk',
    value: markRaw(pmzbjjtzlqk),
    name: '配煤指标及焦炭质量情况',
  }, {
    key: 'cpxsjhglyljcqk',
    value: markRaw(cpxsjhglyljcqk),
    name: '产品销售及化工类原料进厂情况',
  }, {
    key: 'jlscjgykzqk',
    value: markRaw(jlscjgykzqk),
    name: '焦炉生产及工艺控制情况',
  }, {
    key: 'gxlscjgykzqk',
    value: markRaw(gxlscjgykzqk),
    name: '干熄炉生产及工艺控制情况',
  }, {
    key: 'jhscjgykzqk',
    value: markRaw(jhscjgykzqk),
    name: '净化生产及工艺控制情况',
  }, {
    key: 'dlscqk',
    value: markRaw(dlscqk),
    name: '动力生产情况',
  }, {
    key: 'jcscqk',
    value: markRaw(jcscqk),
    name: '甲醇生产情况',
  }, {
    key: 'jbscqk',
    value: markRaw(jbscqk),
    name: '精苯生产情况',
  }, {
    key: 'yqjzhtqk',
    value: markRaw(yqjzhtqk),
    name: '园区介质互通情况',
  }, {
    key: 'hbzb',
    value: markRaw(hbzb),
    name: '水质指标分析',
  }, {
    key: 'rscfx',
    value: markRaw(rscfx),
    name: '日生产分析',
  }, {
    key: 'rgcfx',
    value: markRaw(rgcfx),
    name: '日工程分析',
  }]);

  const bsnum = ref(0)
  // 
  onMounted(() => {
    // 获取当班调度
    getDispatch({
      date: newdate.value
    }).then((res) => {
      if (res.id) {
        formInline.value = res
      }
    })

    getNocheck().then((res) => {
      console.log('=====', res)
      if (res.count > 0) {
        bsnum.value = res.count
      }
    })
  })

  // 提交方法，调用接口
  const check = async (status: any) => {
    ElMessageBox.confirm(
        '您确定要审核吗？',
        '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        let userInfo = cache.get('userInfo')
        checkSave({
          cid: userInfo.id,
          cname: userInfo.name,
          date: newdate.value,
          status
        }).then(() => {
          bsnum.value = bsnum.value - 1
        })

      })
  }

  // 提交方法，调用接口
  const submit = async () => {
    await dispatchSave({...formInline.value,date:newdate.value})
  }

  function exportExcel() {
    exportExcelApi({
      date:newdate.value
    }).then((res:any) => {
      console.log(res)
      window.location.href=res.path
    })
    // let content = ''

    // for(let i=0;i<comArr.value.length;i++){
    //   content += document.querySelector('#'+comArr.value[i].key).firstChild.innerHTML
    // }

    // const uri = 'data:text/excel;charset=utf-8,\ufeff' + encodeURIComponent(content);

    // const link = document.createElement("a");
    // link.href = uri;
    // // 下载的文件命名 也可以（5月数据表.xlsx）
    // link.download =  date.value+"生产日报表.xls";
    // link.click();

  }

  // 快速定位相关代码
  const ishow = ref(false)
  const defalutKey = ref('')

  function yiru() {
    console.log('移入')
    ishow.value = true
  }

  function yichu() {
    console.log('移出')
    ishow.value = false
  }
  const scrollbarRef = inject('scrollbarRef')
  const innerRef = ref < HTMLDivElement > ()

  function to(key: any) {
    defalutKey.value = key
    const element = document.querySelector('#' + key)
    scrollbarRef.value!.setScrollTop(element.offsetTop)
  }
</script>

<style scoped>
  .el-form .el-form-item {
    margin-bottom: 0;
  }

  .bltitle {
    height: 44px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }

  .location {
    position: fixed;
    top: 100px;
    left: 237px;
  }

  .location button {
    background: rgba(70, 100, 255, 0.5);
  }

  .list {
    position: fixed;
    text-align: center;
    width: 200px;
    background: #eee;
    top: 15%;
    left: 230px;
    border-radius: 5px;
    border: 1px solid #aaa;
  }

  .item {
    margin: 10px 5px;
  }
</style>
